/**
 * 表单元素绑定相关
 *  1. input text password
 *  2. input checkbox radio
 *  3. textarea
 *  4. select
 *  5. input file
 *
 *
 * 问题：
 *  1. 表单元素绑定了 state 数据之后，发现表单元素无法修改数据
 *    原因是，绑定了 value 属性之后，该元素变成了受控组件（元素的数据有state数据完全控制）
 *
 * 特点：
 *  1. text \ password \ select \ textarea，绑定了 value 属性，没有绑定 onChange 的话，该元素是只读的。（浏览器会报错）
 *  2. radio \ checkbox 表单元素，绑定了 checked 属性，也需要 onChange，如果没有的话，该元素是只读的（浏览器会报错）
 *  3. file 选择框，是无法通过数据来控制的，它只能是一个 非受控组件
 *  4. 期望不受控又期望有默认值来控制，就可以将 value => defaultValue   checked => defaultChecked
 *      PS: defaultValue 与 defaultChecked 绑定的值发生变化不会引起元素的改变。
 */

import React from "react";

class App extends React.Component {
  state = {
    username: "admin",
    password: "admin",
    gender: 0, // 0 - 女 1 - 男
    like: ["song"], // song - 唱 jump - 跳 rap - Rap
    city: "", // '0001' - 北京  '0002' - 上海 '0003' - 广州 '0004' - 深圳
    remark: "一个丑八怪", // 备注
    isOk: true, // 协议
  };

  handleChangeUsername = (event) => {
    console.log("123", event.target.value);
    this.setState({
      username: event.target.value,
    });
  };

  handleChangePassword = (event) => {
    this.setState({
      password: event.target.value,
    });
  };

  handleChangeGender = (event) => {
    console.log(typeof event.target.value);
    this.setState({
      gender: +event.target.value,
    });
  };

  handleChangeLike = (event) => {
    const value = event.target.value;
    // 判断 value 是否在 this.state.like 中
    if (this.state.like.includes(value)) {
      // 存在，删除该 value
      this.setState({
        like: this.state.like.filter((item) => item !== value),
      });
    } else {
      // 不存在，增加
      this.setState({
        // like: this.state.like.push(value), // push 返回的是数字，且push会修改源数据
        like: [...this.state.like, value],
      });
    }
  };

  handleChangeCity = (event) => {
    console.log(event.target.value);
    this.setState({
      city: event.target.value,
    });
  };

  handleChangeRemark = (event) => {
    this.setState({
      remark: event.target.value,
    });
  };

  handleChangeIsOk = (event) => {
    console.log(event.target.value);
    console.log(event.target.checked); // false true
    this.setState({
      isOk: event.target.checked,
    });
  };

  handleChangeAvatar = (event) => {
    console.log(event.target.files);
  };

  render() {
    // 解构
    const { username, password, gender, like, city, remark, isOk } = this.state;

    return (
      <div>
        <div>
          <label>用户名</label>
          <input
            type="text"
            defaultValue={username}
            // value={username}
            // onChange={this.handleChangeUsername}
          />
        </div>

        <div>
          <label>密码</label>
          <input
            type="password"
            value={password}
            onChange={this.handleChangePassword}
          />
        </div>

        <div>
          <label>性别</label>
          <input
            type="radio"
            checked={gender === 1}
            value={1}
            onChange={this.handleChangeGender}
          />
          男
          <input
            type="radio"
            checked={gender === 0}
            value={0}
            onChange={this.handleChangeGender}
          />
          女
        </div>

        <div>
          <label>爱好</label>
          <input
            type="checkbox"
            value="song"
            checked={like.includes("song")}
            onChange={this.handleChangeLike}
          />
          唱
          <input
            type="checkbox"
            value="jump"
            checked={like.includes("jump")}
            onChange={this.handleChangeLike}
          />
          跳
          <input
            type="checkbox"
            value="rap"
            checked={like.includes("rap")}
            onChange={this.handleChangeLike}
          />
          Rap
        </div>

        <div>
          <label>城市</label>
          <select value={city} onChange={this.handleChangeCity}>
            <option value="" disabled>
              请选择
            </option>
            <option value="0001">北京</option>
            <option value="0002">上海</option>
            <option value="0003">广州</option>
            <option value="0004">深圳</option>
          </select>
        </div>

        <div>
          <label>个人简介</label>
          <textarea
            value={remark}
            onChange={this.handleChangeRemark}
          ></textarea>
        </div>

        <div>
          <label>头像</label>
          <input type="file" onChange={this.handleChangeAvatar} />
        </div>

        <div>
          <input
            type="checkbox"
            value={!isOk}
            checked={isOk}
            onChange={this.handleChangeIsOk}
          />
          用户协议
        </div>

        <div>
          <button>注册</button>
        </div>
      </div>
    );
  }
}

export default App;
